<template>
  <el-dialog :model-value="visible" title="查看角色信息" width="700px" @close="handleClose">
    <div v-if="loading" class="loading-section">
      <el-skeleton :rows="4" animated />
    </div>

    <div v-else>
      <el-alert v-if="error" :title="error" type="error" show-icon closable @close="error = ''" />

      <el-descriptions v-if="roleDetail" :column="2" border class="mb-16">
        <el-descriptions-item label="角色ID">{{ roleDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="角色名称">{{ roleDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ roleDetail.createdAt ? formatDate(roleDetail.createdAt) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ roleDetail.updatedAt ? formatDate(roleDetail.updatedAt) : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="关联用户数" :span="2">
          <el-tag type="info">{{ roleDetail.users?.length || 0 }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-card v-if="roleDetail" class="menus-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>关联菜单</span>
            <el-tag size="small" type="success">共 {{ roleDetail.menus?.length || 0 }} 个</el-tag>
          </div>
        </template>

        <el-table :data="roleDetail.menus || []" size="small" stripe empty-text="暂无关联菜单">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="name" label="菜单名称" min-width="140" />
          <el-table-column prop="path" label="路径" min-width="180" />
          <el-table-column prop="acl" label="权限标识" min-width="140" />
          <el-table-column prop="order" label="排序" width="90" />
        </el-table>
      </el-card>
    </div>

    <template #footer>
      <el-button @click="handleClose">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import { roleApi } from '@/apis/role';
import type { Role } from '@/types/role';

defineOptions({ name: 'ViewRoleDialog' });

const props = defineProps<{
  modelValue: boolean;
  roleId?: number;
}>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
}>();

const visible = ref<boolean>(props.modelValue);
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
    if (val) {
      fetchDetail();
    }
  }
);

watch(
  () => props.roleId,
  () => {
    if (visible.value) {
      fetchDetail();
    }
  }
);

const loading = ref(false);
const error = ref('');
const roleDetail = ref<Role | null>(null);

function formatDate(dateString: string) {
  return new Date(dateString).toLocaleString('zh-CN');
}

async function fetchDetail() {
  error.value = '';
  roleDetail.value = null;
  if (!props.roleId || props.roleId <= 0) {
    error.value = '缺少有效的角色ID';
    return;
  }
  loading.value = true;
  try {
    const res = await roleApi.getRole(props.roleId);
    // 期望返回 BaseResponse<Role>，取 data 字段
    roleDetail.value = (res as any)?.data as Role;
  } catch (e: any) {
    error.value = e?.message || '获取角色详情失败';
  } finally {
    loading.value = false;
  }
}

function handleClose() {
  emit('update:modelValue', false);
}

onMounted(() => {
  if (visible.value) {
    fetchDetail();
  }
});
</script>

<style lang="scss" scoped>
.mb-16 {
  margin-bottom: 16px;
}
.menus-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.loading-section {
  padding: 12px 0;
}
</style>